


<template>
  <div class="decorate">
    <div class="scroll-text">
      <marquee behavior="" direction="right" scrollamount="7" vspace="15" hspace="15">欢迎来到奖多多，你的支持是我前进的动力，感谢！</marquee>
    </div>
    <div class="right-advertisement">
      <div class="one-pic"></div>
      <div class="two-pic"></div>
      <div class="three-pic"></div>
      <div class="four-pic"></div>
      <div class="five-pic"></div>
      <div class="six-pic"></div>
    </div>
  </div>
</template>

<script>
  export default{
    name: "decorate"
  }
</script>

<style scoped>

  /*文字设置*/
  .decorate .scroll-text{
    width: 1042px;
    height: 80px;
    position: absolute;
    top: 39px;
    left: 240px;
    font-size: 14px;
    color: #e23a3a;
    text-shadow: 1px 1px 2px #000, 2px 2px 2px #ff0, 3px 3px 2px #ff0, 4px 4px 2px #ff0;
    /*有继承性*/
    animation: changeText 3s ease infinite;
  }

  /*动画*/
  @keyframes changeText{
    0%{ font-size: 21px; color: orange; font-style: italic}
    20%{ font-size: 24px; color: yellow; font-style: oblique}
    40%{ font-size: 27px; color: green; font-style: normal}
    /*indigo: 靛蓝|染料*/
    60%{ font-size: 30px; color: indigo; font-style: italic}
    /*oblique: 斜的，倾斜，不光明正大的*/
    80%{ font-size: 32px; color: blue; font-style: oblique}
    100%{ font-size: 33px; color: purple; font-style: normal}
  }

  /*右侧广告*/
.decorate .right-advertisement{
  width: 140px;
  height: 610px;
  background: green;
  position: absolute;
  top: 173px;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}


  .decorate .right-advertisement div{
    flex: 1;
  }

  /*背景图片*/
  .decorate .right-advertisement .one-pic{
    background: url(../../assets/images/firstdecorate/1.gif) no-repeat;
    background-size: 100% 100%;
  }
  .decorate .right-advertisement .two-pic{
    background: url(../../assets/images/firstdecorate/2.gif) no-repeat;
    background-size: 100% 100%;
  }
  .decorate .right-advertisement .three-pic{
    background: url(../../assets/images/firstdecorate/3.gif) no-repeat;
    background-size: 100% 100%;
  }
  .decorate .right-advertisement .four-pic{
    background: url(../../assets/images/firstdecorate/4.gif) no-repeat;
    background-size: 100% 100%;
  }
  .decorate .right-advertisement .five-pic{
    background: url(../../assets/images/firstdecorate/6.gif) no-repeat;
    background-size: 100% 100%;
  }
  .decorate .right-advertisement .six-pic{
    background: url(../../assets/images/firstdecorate/6.gif) no-repeat;
    background-size: 100% 100%;
  }

</style>


